<script setup>
import { ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElButton, ElText, ElLink } from 'element-plus'
import axios from 'axios'

async function submitForm() {
  if (formRef.value) {
    try {
      await formRef.value.validate(); // 验证表单

      // 获取账户和密码
      const account = encodeURIComponent(form.value.account); // 编码URL字符
      const password = encodeURIComponent(form.value.password); // 编码URL字符

      // 发送POST请求
      await axios.post(`http://localhost:918/manager/login?account=${account}&password=${password}`, {
        // 将账户和密码放在请求体中
        account: form.value.account,
        password: form.value.password,
      })
          .then(response => {
            window.sessionStorage.setItem('token', response.data.token);
            if (response.status === 200) { // 检查HTTP状态码
              if (response.data.status === "success") {
                window.location.href = '/index1';
                alert('登录成功!');
              } else {
                alert('账号或密码错误!');
              }
            }
          })
          .catch(error => {
            console.error('登录失败:', error);
            alert('登录失败，请稍后再试!');
          });
    } catch (error) {
      // 处理validate或其他异步操作中的错误
      console.error('表单验证失败:', error);
    }
  }
}


const formRef = ref(null)
const form = ref({
  account: '',
  password: '',
})

const rules = {
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    // { validator: validatePassword, message: '密码格式错误' , trigger: 'blur'}
  ],
}

</script>

<template>
  <div class="background-image-container">
    <div class="login-container" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
      <el-form
          class="form-with-border"
          :model="form"
          :rules="rules"
          ref="formRef"
          label-width="auto"
          style="max-width: 400px"
      >
        <div style="display: flex; justify-content: center; align-items: center;margin-bottom: 10px">
          <el-text class="text">行远.登录</el-text>
        </div>
        <el-form-item prop="account">
          <el-input
              v-model="form.account"
              style="width: 400px;height: 40px"
              placeholder="账号"
              autocomplete="account"
              clearable
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="form.password"
              style="width: 400px;height: 40px"
              type="password"
              placeholder="密码"
              autocomplete="password"
              show-password
          />
        </el-form-item>
        <el-form-item>
          <div style="display: flex; justify-content: center; align-items: center;">
            <el-button type="primary" style="width: 350px;height: 40px;font-size: 25px;border-radius: 14px;" plain @click="submitForm">登 录</el-button>
          </div>
        </el-form-item>
        <div class="button-container" style="display: flex; justify-content: center; align-items: center; ">
          <el-text style="font-size: 22px">如果没有账号？</el-text>
          <el-link :underline="true" type="danger" style="font-size: 22px" @click="$router.push('/register')" target="_self">注册</el-link>
        </div>
        <div class="button-container" style="display: flex; justify-content: center; align-items: center; ">
          <el-text style="font-size: 22px">忘记账号？</el-text>
          <el-link :underline="true" type="danger" style="font-size: 22px" @click="$router.push('/phone')" target="_self">手机号登录</el-link>
        </div>
        <div class="button-container" style="display: flex; justify-content: center; align-items: center; ">
          <el-text style="font-size: 22px">忘记密码？</el-text>
          <el-link :underline="true" type="danger" style="font-size: 22px" @click="$router.push('/found')" target="_self">找回密码</el-link>
        </div>
      </el-form>
    </div>
  </div>

</template>


<style scoped>
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
.background-image-container {
  background-image: url('@/assets/background.png');
  background-size: cover; /* 或者使用其他值，如contain、100% 100%等 */
  background-position: center;
}
.form-with-border {
  /* 设置边框的样式 */
  border: 2px solid #333333; /* 边框宽度为2px，样式为实线，颜色为黑色 */
  /* 为了让边框看起来更完整，通常还需要设置一些内边距和外边距 */
  padding: 20px; /* 内边距 */
  margin: 20px; /* 外边距 */
  /* 为了让边框看起来更美观，你可以添加一些圆角 */
  border-radius: 14px; /* 边框圆角 */
  /* 还可以添加阴影效果 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
  height: 400px;
  width: 600px;
}
.text {
  font-size: 50px; /* 使用像素 */
  font-weight: bold;
}
* {
  box-sizing: border-box;
  /*改变所有元素的盒模型（box model）的计算方式。
  在CSS中，盒模型是描述元素如何布局在页面上的一种方式。
  传统上，CSS的盒模型由四个部分组成：内容（content）、
  内边距（padding）、边框（border）和外边距（margin）。
  默认情况下，元素的宽度和高度只包括内容（content）部分，
  内边距（padding）和边框（border）会额外增加元素的最终尺寸。*/
}


body {
  color: #333;
  font-size: 14px;
  margin: 0;
  padding: 0;
  /*定义了一个元素的字体大小、
  外边距（margin）和内边距（padding）的样式。*/
}
</style>